
function canDrop(elArray) {

	if (elArray.length) {
		for (var i = 0; i < elArray.length; i++) {
			if (elArray[i].html == '') {
				// alert("Target Location can not be null!");
			}
			;
			Ext.create('Ext.dd.DDTarget', elArray[i].id, 'carsDDGroup');
			Ext.get(elArray[i].id).addListener('contextmenu', function(e) {
				e.stopEvent();
				currentDivId = e.target.id;
				menu.showAt(e.getXY());
				
			});
		}
		;
	} else {
		Ext.create('Ext.dd.DDTarget', elArray.id, 'carsDDGroup');

		Ext.get(elArray.id).addListener('contextmenu', function(e) {
			e.stopEvent();
			currentDivId = e.target.id;
			menu.showAt(e.getXY());

		});
	}

}



Ext.define('locModel', {
	extend : 'Ext.data.Model',
	fields : [ 'locationKey', 'workstation' ]
})

var locColoumns = [ {
	//header : 'Location',
	dataIndex : 'workstation',
	width:'100%',
	align:'center'
}];
var store = Ext.create('Ext.data.Store', {
	pageSize: 8,
	model: 'locModel',
	autoLoad : true,
	proxy : {
		type : 'ajax',
		url : '../searchLocation',// 请求
		reader : {
			type: 'json',
			root: 'locations',
			totalProperty: 'locationCount'
		},
	},
	sorters: [{
		property: 'name',
		direction: 'DESC'
	}]

});


var routeColoumns = [ {
	//header : 'Route',
	dataIndex : 'name',
	width:'100%',
	align:'center'
}];
Ext.define('routeModel', {
	extend : 'Ext.data.Model',
	fields : [ 'routeKey', 'name','stepsNum' ]
})
var routeStore = Ext.create('Ext.data.Store', {
	pageSize: 8,
	model: 'routeModel',
	autoLoad : true,
	proxy : {
		type : 'ajax',
		url : '../searchRoute',// 请求
		reader : {
			type: 'json',
			root: 'routes',
			totalProperty: 'routeCount'
		},
	}
});
var backCount = 0;
var backObj={};
var detailMenu = new Ext.menu.Menu({
	items : [{
		text:'Route Detail',
		iconCls:'detail',
		handler :function(){
			backCount=backCount+1;
			var currentRoute = document.getElementById(currentDivId);
			
			var routeName = currentRoute.innerHTML;
			var routeKey = currentRoute.className;
			Ext.getCmp('routeStepBackBtnId').setDisabled(false);
			backObj[backCount]=document.getElementById('routeNameTextId0').innerHTML;
			viewRouteStepsWinFN(routeName,routeKey);
		}
	}]
});
var menu = new Ext.menu.Menu({
	items : [{
		text : '清空',
				handler : function(e) {
					var currentDiv = document.getElementById(currentDivId);
					var value = currentDiv.innerHTML;
					if (value == "Fail Loc" || value == "Current Loc"
							|| value == "From Loc") {
						return;
					} else {
						currentDiv.style.borderStyle = 'dashed';
						currentDiv.style.color = '#D8D8D8';
						currentDiv.className  = '';
						var color = currentDiv.style.borderColor;
						if (color.trim() == 'red') {
							currentDiv.innerHTML = "Fail Loc"
						} else if (color.trim() == 'green') {
							currentDiv.innerHTML = "Current Loc"
						} else if (color.trim() == 'blue') {
							currentDiv.innerHTML = "From Loc"
						}
					}
				}
			},
			{
				text : 'Route Detail',
				handler : function(e) {
					var currentDiv = document.getElementById(currentDivId);
					var color = currentDiv.style.borderColor;
					var borderStyle =  currentDiv.innerHTML;
					if (color.trim() == 'green') {
						if(borderStyle=='solid'){
							
						}else{
							Ext.Msg.alert('Error','This Loction is not a subroute !');
						}
					} else {
						Ext.Msg.alert('Error','This Loction is not a subroute !');
					}
				}
			} ]
});

var big ;
var currentDivId = "";
var displayRouteName = "";
var j= 1;
Ext.onReady(function(){
	
	
	var k=0;
	Ext.create('Ext.panel.Panel', {
		width: '100%',
		height:'100%',
		title: 'Border Layout',
		layout: 'border',
		items: [{
			title: 'South Region is resizable',
			region: 'south',     
			xtype: 'panel',
			height: 60,
			split: true,        
			margins: '0 5 5 5'
		},{
			id:'dragPanel',
			region:'west',
			xtype: 'panel',
			margins: '5 0 0 5',
			width: 250,
			id: 'west-region-container',
			layout: 'auto',
			items:[{
				id:'dragTreepanel',
				xtype:'grid',
				title:'Location List',
				store: store,
				height:290,
				margin:'0 0 10 0',
				columns:locColoumns,
    			collapsible :true,
    			tbar:[{
    				xtype:'textfield',
    				id:'locationNameId',
    				emptyText:'Search Loc'
    			},'-',{
    				xtype:'button',
    				id:'locationSearchId',
    				text:'filter',
    				width:70,
    				iconCls:'search',
    				handler : function(){
    					var workstation = Ext.getCmp('locationNameId').getValue().trim();
    					//if(workstation!=''&&workstation!=null){
    						store.on('beforeload', function (store, options) {
    				 			var params = {
    				 				workstation: workstation,
    				 			};
    				 			Ext.apply(store.proxy.extraParams, params);
    				 		}); 
    						store.load();
    					//}
    				}
    			}],
    			dockedItems: [{
    		        xtype: 'pagingtoolbar',
    		        store: store,  
    		        dock: 'bottom',
    		        displayInfo: true
    		    }],
    			listeners:{
    				itemmouseenter : function( view, record, item, index, e){
    					var tree = Ext.getCmp('dragTreepanel');
    					var text = record.get('workstation');
    					var targetId = record.get('locationKey');
    					if(!item.draggable){
    						item.dragZone = new Ext.dd.DragSource(item.id, { group: 'carsDDGroup' });
    						item.draggable=true;
    						item.dragZone.afterDragDrop = function(target, e, id) {
    						    var destEl = Ext.get(id);
    						    destEl.dom.innerHTML = text; //设置目标id的背景色
    						    destEl.dom.style.borderStyle = 'solid';
    						    destEl.dom.style.color = 'black'; 
    						    
    						    var color = destEl.dom.style.borderColor;
    						    destEl.dom.className = color+targetId;
    						};
    					}
						
    				}
    			}
			},{
				id:'dragRouteGridPanel',
				xtype:'grid',
				title:'Route List',
				store: routeStore,
				height:290,
				collapsible :true,
				columns:routeColoumns,
				tbar:[{
    				xtype:'textfield',
    				id:'searchRouteNameId',
    				emptyText:'Search Route'
    			},'-',{
    				xtype:'button',
    				id:'routeSearchId',
    				text:'filter',
    				width:70,
    				iconCls:'search',
    				handler : function(){
    					var routeName = Ext.getCmp('searchRouteNameId').getValue().trim();
    					routeStore.on('beforeload', function (store, options) {
    				 			var params = {
    				 				name: routeName,
    				 			};
    				 			Ext.apply(store.proxy.extraParams, params);
    				 		}); 
    					routeStore.load();
    			}
    			}],
    			dockedItems: [{
    		        xtype: 'pagingtoolbar',
    		        store: routeStore,  
    		        dock: 'bottom',
    		        displayInfo: true
    		    }],
    			listeners:{
    				itemmouseenter : function( view, record, item, index, e){
    					var tree = Ext.getCmp('dragRouteGridPanel');
    					var text =  record.get('name');
    					var targetId = record.get('routeKey');
    					if(!item.draggable){
    						item.dragZone = new Ext.dd.DragSource(item.id, { group: 'carsDDGroup' });
    						item.draggable=true;
    						item.dragZone.afterDragDrop = function(target, e, id) {
    						    var destEl = Ext.get(id);
    						    destEl.dom.innerHTML = text; //设置目标id的背景色
    						    destEl.dom.style.borderStyle = 'solid';
    						    destEl.dom.style.color = 'black'; 
    						    var color = destEl.dom.style.borderColor;
    						    destEl.dom.className = 'route'+targetId;
    						};
    					}
    				},
    				itemdblclick : function( view, record, item, index, e){
    					var dropPanel = Ext.getCmp('dropPanel');
    					var routeName =  record.get('name');
    					var routeKey = record.get('routeKey');
    					if(Ext.getCmp('saveRouteStepBtnId').hidden){
    						viewRouteStepsWinFN(routeName,routeKey);
    					}else{
    						return;
    					}    					
    					
    				}
    			}
			}]
		},{
			id:'dropPanel',
			title: 'Route Step',
			region: 'center',    
			xtype: 'panel',
			layout: 'hbox',
			overflowX : 'hidden',
			overflowY : 'scroll',
			margins: '5 5 0 0',
			buttonAlign : 'right',
			listeners:{
				afterrender: function(){
					
				}
			},
			tbar:[{
				xtype:'button',
				text:'',
				id:'routeStepBackBtnId',
				iconCls:'back',
				disabled:true,
				width:25,
				handler:function(){
					if(backCount==0)
						return;
					var routeName =backObj[backCount];
					backCount=backCount-1;
					viewRouteStepsWinFN(routeName,0);					
				}
			},'-',{
				xtype:'checkbox',
				id:'selectAllId',
				boxLabel :'全选',
				disabled : true,
				checked :false,
				handler: function(){
					var selectAll = Ext.getCmp('selectAllId');
					if(selectAll.checked){
						if(j !=0 ){
							for (var i = 0; i < j; i++) {
								var checkBox = document.getElementById('checkbox'+i);
								if (checkBox&&!checkBox.checked) {
									checkBox.checked=true;
								}
							};
						}
					}else{
						if(j !=0 ){
							for (var i = 0; i < j; i++) {
								var checkBox = document.getElementById('checkbox'+i);
								if (checkBox&&checkBox.checked) {
									checkBox.checked=false;
								}
							};
						}
					}
				}
			},'-',{
				xtype:'button',
				text:'',
				id:'routeStepAddBtnId',
				iconCls:'add',
				disabled:true,
				width:25,
				handler : function() {  
					var dropPanel = Ext.getCmp('dropPanel');
					var body = dropPanel.body;
					var childNodes = dropPanel.body.dom.childNodes;
					Ext.getCmp('selectAllId').setDisabled(false);
					
					
					var firstElArray ={
						id:'outDiv'+j,
						tag :'div' ,
						html:'',
						style:'background-color:#F8F8F8;width:1500px; height:30px; margin:30 0 0 0 ;  position:relative;'
					}
					var checkbox = {
						id :  'checkbox'+j,
						tag : 'input',
						type:'checkbox',  
						style : 'margin:8 0 0 0; left:20px; position:absolute;' 
					}

					var failLoc = {
						id :  Ext.id(),
						tag : 'div',  
						html :  'Fail Loc',  
						//onclick :'itemClick()',
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed red;width:100px; height:30px;  left:250px; position:absolute;' 
					}
					
					var leftImage = {
						id :  Ext.id(),  
						tag : 'img',  
						src:'static/images/left2.png',
						style : 'width:50; left:200px;top:5px; position:absolute;'
					};

					var passLoc ={
						id :  Ext.id(),  
						tag : 'div',  
						html :  'Current Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed green;width:100px; height:30px; left:100px; position:absolute;'
					};

					var downImage = {
						id :  Ext.id(),  
						tag : 'img',  
						src:'static/images/down2.png',
						style : 'height:30px; left:143px; top:-30px ; position:absolute;'
					};
					
					var fromLoc = [{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:400px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:520px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px;  left:640px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:760px; position:absolute;'
					}];


					var steps = {
						id: 'step'+j,
						tag:'h',
						html:'',
						style:'border-radius:20px;font-weight: bold;margin:2 0 0 0; padding:5px 0 0 0; text-align:center;width:25;height:25;background-color:#696262; color: white;left:50px; position:absolute;'
					}

					
					var first  = Ext.DomHelper.append(big, firstElArray,true);
					if(j ==0){
						Ext.DomHelper.append(first,checkbox);
						Ext.DomHelper.append(first,failLoc);
						Ext.DomHelper.append(first,leftImage);
						Ext.DomHelper.append(first,passLoc);
						Ext.DomHelper.append(first,fromLoc);
					}else if(j!=0){
						Ext.DomHelper.append(first,checkbox);
						Ext.DomHelper.append(first,failLoc);
						Ext.DomHelper.append(first,leftImage);
						Ext.DomHelper.append(first,passLoc);
						Ext.DomHelper.append(first,downImage);
						Ext.DomHelper.append(first,fromLoc);
						Ext.DomHelper.append(first,steps);
					}
					var sibling  = document.getElementById('outDiv'+j).previousSibling;
					document.getElementById('outDiv'+j).lastChild.innerHTML = parseInt(sibling.lastChild.innerHTML)+10;
					// alert(sibling.lastChild.innerHTML);
					j = j+1;
					canDrop(failLoc);
					canDrop(passLoc);
					canDrop(fromLoc);
				} 
			},'-',{
				xtype:'button',
				text:'',
				id:'routeStepDeleteBtnId',
				iconCls:'delete',
				width:25,
				disabled:true,
				handler: function(){
					var bigDiv = document.getElementById('bigDivId');
					if(j !=0 ){
						for (var i = 0; i < j; i++) {
							//alert(i);
							var checkBox = document.getElementById('checkbox'+i);
							if (checkBox&&checkBox.checked) {
								checkBox.parentNode.parentNode.removeChild(checkBox.parentNode);
							}
						};
					}
					if(Ext.getCmp('selectAllId').checked){
						Ext.getCmp('selectAllId').setValue(false);
					}
					if (bigDiv.childNodes.length>1) {
						for (var i = 1; i < bigDiv.childNodes.length; i++) {
							var sibling = bigDiv.childNodes[i].previousSibling;
							bigDiv.childNodes[i].lastChild.innerHTML =  parseInt(sibling.lastChild.innerHTML)+10;
						}
					}	
					else{
						Ext.getCmp('selectAllId').setDisabled(true);
					};
				}
			},'-',{
				xtype: 'button',
				text:'Edit',
				id:'editRouteStepBtnId',
				disabled : true,
				iconCls : 'edit',
				handler : function(){
					var dropPanel = Ext.getCmp('dropPanel');
					var routeName = document.getElementById('routeNameTextId0').innerHTML;
					if(dropPanel.body.dom.childNodes.length>1){
						dropPanel.body.dom.removeChild(document.getElementById('label0'));
						dropPanel.body.dom.removeChild(document.getElementById('routeNameTextId0'));
						dropPanel.body.dom.removeChild(document.getElementById('bigDivId'));
						j=1;
					}
					Ext.getCmp('saveRouteStepBtnId').show();
					Ext.getCmp('cancelRouteStepBtnId').show();
					
					Ext.getCmp('routeStepAddBtnId').setDisabled(false);
					Ext.getCmp('routeStepDeleteBtnId').setDisabled(false);
					editRouteStepFN(routeName);
				}
			},'->',{
				xtype:'button',
				text:'Add Route',
				id:'addRouteBtnId',
				iconCls:'indent',
				handler:function(){
					Ext.create('Ext.window.Window',{
						id:'addRouteWinId',
						title:'Add Route',
						height:100,
						width:300,
						autoShow:true,
						items:[{
							xtype:'form',
							id:'addRouteFormId',
							layout:{
								type:'column'
							},
							border:false,
							margin:'5',
							padding:'5',
							items:[{
								xtype:'textfield',
								id:'addRouteNameId',
								fieldLabel:'Route Name',
								width:'100%'
							}],
							buttons:[{
								text:'Save',
								width:70,
								handler:function(){
									var routeName = Ext.getCmp('addRouteNameId').getValue();
									displayRouteName = routeName;
									if(routeName!=""&&routeName!=null){
										Ext.Ajax.request({
											url:'../saveRoute',
											params:{
												name:routeName
											},
											success : function(resp){
												var dropPanel = Ext.getCmp('dropPanel');
						    					if(dropPanel.body.dom.childNodes.length>1){
						    						dropPanel.body.dom.removeChild(document.getElementById('label0'));
						    						dropPanel.body.dom.removeChild(document.getElementById('routeNameTextId0'));
						    						dropPanel.body.dom.removeChild(document.getElementById('bigDivId'));
						    						j=1;
						    					}
												var obj = Ext.decode(resp.responseText);
												var message = obj.msg;
												if(obj.success){
													Ext.Msg.show({
								 						title: 'Success',
								 						msg: message,
								 						width: 300,	
								 					});
								 					setTimeout(function(){
								 						Ext.MessageBox.hide();
								 					}, 2000);
								 					Ext.getCmp('addRouteBtnId').setDisabled(true);
								 					Ext.getCmp('editRouteStepBtnId').setDisabled(true);
													renderFirstRouteStep();
												}else{
													Ext.Msg.alert('	Error', message);
								 					return;
												}
											},
											failure : function(){
												Ext.Msg.alert('	Error', 'Save Route Failed !');
												return;
											}
										});
									}
								}
							},{
								text:'Cancel',
								width:70,
								handler : function(){
									Ext.getCmp('addRouteWinId').close();
								}
							}]
						}]
					})
				}
			}],
			buttons:[{
				xtype:'button',
				text:'Save',
//				disabled:true,
				hidden:true,
				id:	'saveRouteStepBtnId',
				handler : function(){
					var dropPanel = Ext.getCmp('dropPanel');
					displayRouteName = document.getElementById('routeNameTextId0').innerHTML;
					var bigDiv= Ext.get('bigDivId');
					var child = bigDiv.dom.childNodes;
					var stepsData = "";
					for (var i = 0; i < child.length; i++) {
						var stepChild = child[i].childNodes;
						var step = child[i].lastChild.innerHTML;
						stepsData = stepsData+step+',';
						for (var k = 0; k < stepChild.length; k++) {
							if(stepChild[k].tagName=='DIV'){
								var targetItem = document.getElementById(stepChild[k].id);
								if(targetItem.className&&targetItem.className!=''){
									//alert(targetItem.className);
									stepsData+=targetItem.className+',';
								}
							}
						}
						
						stepsData = stepsData.substring(0,stepsData.length-1);
						stepsData+=((i+1)==child.length)?'':';';
					}
					Ext.Ajax.request({
						url:'../saveRouteStep',
						params:{
							stepsData:stepsData,
							routeName:displayRouteName
						},
						success : function(resp){
							var routeKey = Ext.decode(resp.responseText).routeKey;
							dropPanel.body.dom.removeChild(document.getElementById('label0'));
							dropPanel.body.dom.removeChild(document.getElementById('routeNameTextId0'));
							dropPanel.body.dom.removeChild(document.getElementById('bigDivId'));
							j=1;
							routeStore.load();
							Ext.Msg.show({
		 						title: 'Success',
		 						msg: 'Save Route Step Successfully !',
		 						width: 300,	
		 					});
		 					setTimeout(function(){
		 						Ext.MessageBox.hide();
		 					}, 2000);
		 					Ext.getCmp('addRouteBtnId').setDisabled(false);
							viewRouteStepsWinFN(displayRouteName,routeKey);
						},
						failure: function(resp){
							
						}
					});
				}
			},{
				xtype:'button',
				text:'Cancel',
				id:'cancelRouteStepBtnId',
				hidden : true,
				handler : function(){
					var dropPanel = Ext.getCmp('dropPanel');
					displayRouteName = document.getElementById('routeNameTextId0').innerHTML;
					dropPanel.body.dom.removeChild(document.getElementById('label0'));
					dropPanel.body.dom.removeChild(document.getElementById('routeNameTextId0'));
					dropPanel.body.dom.removeChild(document.getElementById('bigDivId'));
					viewRouteStepsWinFN(displayRouteName,0);
				}
			}]
		}],
		renderTo: Ext.getBody()
	});
});

function renderFirstRouteStep(){
	var bigDiv ={
			id:'bigDivId',
			tag :'div' ,
			html:'',
			style:'width:900px; height:2000px; margin:0 0 0 0 ; position:relative;'
		};
	
	Ext.getCmp('saveRouteStepBtnId').show();
	Ext.getCmp('cancelRouteStepBtnId').show();
	Ext.getCmp('routeStepAddBtnId').setDisabled(false);
	Ext.getCmp('routeStepDeleteBtnId').setDisabled(false);
	var dropPanel = Ext.getCmp('dropPanel');
	//dropPanel.body.dom.style.overflow='scroll';
	var firstElArray ={
		id:'outDiv'+0,
		tag :'div' ,
		html:'',
		style:'background-color:#F8F8F8;width:1500px; height:30px; margin:30 0 0 0 ;  position:relative;'
	}
	var failLoc = {
		id :  Ext.id(),
		tag : 'div',  
		html :  'Fail Loc',  
		style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed red;width:100px; height:30px;  left:250px; position:absolute;' 
	}


	var leftImage = {
		id :  Ext.id(),  
		tag : 'img',  
		src:'static/images/left2.png',
		style : 'width:50; left:200px;top:5px; position:absolute;'
	};

	var passLoc ={
		id :  Ext.id(),  
		tag : 'div',  
		html :  'Current Loc',  
		style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed green;width:100px; height:30px; left:100px; position:absolute;'
	};

	var fromLoc = [{
		id :  Ext.id(),  
		tag : 'div',  
		html :  'From Loc',  
		style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:400px; position:absolute;'
	},{
		id :  Ext.id(),  
		tag : 'div',  
		html :  'From Loc',  
		style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:520px; position:absolute;'
	},{
		id :  Ext.id(),  
		tag : 'div',  
		html :  'From Loc',  
		style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px;  left:640px; position:absolute;'
	},{
		id :  Ext.id(),  
		tag : 'div',  
		html :  'From Loc',  
		style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:760px; position:absolute;'
	}];

	var steps = {
		id: 'step'+0,
		tag:'h',
		html:'10',
		style:'font-weight: bold;margin:2 0 0 0; padding:5px 0 0 0; text-align:center;width:25;height:25;border-radius:20px;background-color:#696262; color: white;left:50px; position:absolute;'
	}

    var label ={
			id: 'label0',
			tag:'label',
			html:'Route Name : ',
			style:'top:10px;left:20px; position:relative;'
	}
	 var routeNameText ={
			id: 'routeNameTextId0',
			tag:'label',
			html: displayRouteName,
			style:'color:green; font-weight: bold;top:10px;left:20px; position:relative;'
	}
	/*
	var idContainer = {
			id :  'idContainer0',
			tag : 'div',  
			html :  '',  
			style : 'display:none;left:900; position:absolute;' 
	}*/
	
	Ext.DomHelper.append(dropPanel.body, label,true);
	Ext.DomHelper.append(dropPanel.body, routeNameText,true);
	big  = Ext.DomHelper.append(dropPanel.body, bigDiv,true); 
	var first  = Ext.DomHelper.append(big, firstElArray,true); 
	Ext.DomHelper.append(first,failLoc);
	Ext.DomHelper.append(first,leftImage);
	Ext.DomHelper.append(first,passLoc);
	Ext.DomHelper.append(first,fromLoc);
	Ext.DomHelper.append(first,steps);
	canDrop(failLoc);
	canDrop(passLoc);
	canDrop(fromLoc);
	Ext.getCmp('addRouteWinId').close();
}

function editRouteStepFN(routeName){
	Ext.getCmp('editRouteStepBtnId').setDisabled(true);
	Ext.getCmp('selectAllId').setDisabled(false);
	var bigDiv ={
			id:'bigDivId',
			tag :'div' ,
			html:'',
			style:'width:900px; height:2000px; margin:0 0 0 0 ; position:relative;'
	};
	var label ={
			id: 'label0',
			tag:'label',
			html:'Route Name : ',
			style:'top:10px;left:20px; position:relative;'
	};
	 var routeNameText ={
			id: 'routeNameTextId0',
			tag:'label',
			html: routeName,
			style:'color:green; font-weight: bold;top:10px;left:20px; position:relative;'
	};
	 Ext.Ajax.request({
			url:'../SearchRouteStep',
			params :{
				routeName:routeName
			},
			success : function(resp){
				var editPanel = Ext.getCmp('dropPanel');
				var routeSteps = Ext.decode(resp.responseText).routeSteps;
				Ext.DomHelper.append(editPanel.body, label,true);
				Ext.DomHelper.append(editPanel.body, routeNameText,true);
				big  = Ext.DomHelper.append(editPanel.body, bigDiv,true); 
				for (var i = 0; i < routeSteps.length; i++) {
					var failLoc={};
					var loc = {};
					var passLoc={};
					var leftImage = {};
					
					var fromLoc =[];
					
					var steps = {
							id: Ext.id(),
							tag:'h',
							html:routeSteps[i].step,
							style:'font-weight: bold;margin:2 0 0 0; padding:5px 0 0 0; text-align:center;width:25;height:25;border-radius:20px;background-color:#696262; color: white;left:50px; position:absolute;'
					};
					var firstElArray ={
							id: 'outDiv'+j,
							tag :'div' ,
							html:'',
							style:'background-color:#F8F8F8;width:1500px; height:30px; margin:30 0 0 0 ;  position:relative;'
					};
					
					
					leftImage = {
							id :  Ext.id(),  
							tag : 'img',  
							src:'static/images/left2.png',
							style : 'width:50; left:200px;top:5px; position:absolute;'
					};
					if(routeSteps[i].failLocationKey!=0){
						failLoc = {
								id :  Ext.id(),
								tag : 'div', 
								class : 'red'+routeSteps[i].failLocationKey,
								html :  routeSteps[i].failLocationName,  
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid red;width:100px; height:30px;  left:250px; position:absolute;' 
						}
					}else{
						failLoc = {
								id :  Ext.id(),
								tag : 'div',  
								html :  'Fail Loc',  
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed red;width:100px; height:30px;  left:250px; position:absolute;' 
							}
					}
					if(routeSteps[i].insertedRoute == 1){
						passLoc={
								id :  Ext.id(),  
								tag:'div',
								class : 'route'+routeSteps[i].locationKey,
								html :  routeSteps[i].locationName,
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid green;width:100px; height:30px; left:100px; position:absolute;'	
						};
					}else{
						passLoc={
								id :  Ext.id(),  
								tag:'div',
								class : 'green'+routeSteps[i].locationKey,
								html :  routeSteps[i].locationName,
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid green;width:100px; height:30px; left:100px; position:absolute;'	
						};
					}
					
					
					if(routeSteps[i].fromLocationKey1!=0){
						var from1={
								id :  Ext.id(),  
								tag : 'div',  
								class:'blue'+routeSteps[i].fromLocationKey1,
								html :  routeSteps[i].fromLocationName1,
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid blue;width:100px; height:30px; left:400px; position:absolute;'	
						}
						
					}else{
						var from1={
								id :  Ext.id(),  
								tag : 'div',  
								html :  'From Loc',  
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:400px; position:absolute;'	
						};
						
					}
					fromLoc.push(from1);
					if(routeSteps[i].fromLocationKey2!=0){
						var from2={
								id :  Ext.id(),  
								tag : 'div',  
								class:'blue'+routeSteps[i].fromLocationKey2,
								html :  routeSteps[i].fromLocationName2,
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid blue;width:100px; height:30px; left:520px; position:absolute;'	
						}
						
					}else{
						var from2={
								id :  Ext.id(),  
								tag : 'div',  
								html :  'From Loc',  
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:520px; position:absolute;'	
						}
						
					}
					fromLoc.push(from2);
					if(routeSteps[i].fromLocationKey3!=0){
						var from3={
								id :  Ext.id(),  
								tag : 'div',  
								class:'blue'+routeSteps[i].fromLocationKey3,
								html :  routeSteps[i].fromLocationName2,
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid blue;width:100px; height:30px;  left:640px; position:absolute;'	
						}
						
					}else{
						var from3={
								id :  Ext.id(),  
								tag : 'div',  
								html :  'From Loc',  
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px;  left:640px; position:absolute;'	
						}
						
					}
					fromLoc.push(from3);
					if(routeSteps[i].fromLocationKey4!=0){
						var from4={
								id :  Ext.id(),  
								tag : 'div',  
								class:'blue'+routeSteps[i].fromLocationKey4,
								html :  routeSteps[i].fromLocationName4,
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid blue;width:100px; height:30px; left:760px; position:absolute;'	
						}
						
					}else{
						var from4={
								id :  Ext.id(),  
								tag : 'div',  
								html :  'From Loc',  
								style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:760px; position:absolute;'	
						}
						
					}
					fromLoc.push(from4);
					var first  = Ext.DomHelper.append(big, firstElArray,true);
					if(i != 0){
						var	 checkbox = {
									id :  'checkbox'+j,
									tag : 'input',
									type:'checkbox',  
									style : 'margin:8 0 0 0; left:20px; position:absolute;' 
							};
						Ext.DomHelper.append(first,checkbox);
					};
					Ext.DomHelper.append(first,failLoc);
					
					Ext.DomHelper.append(first,leftImage);
					
					Ext.DomHelper.append(first,passLoc);
					
					if(i != 0){
						var downImage = {
								id :  Ext.id(),  
								tag : 'img',  
								src:'static/images/down2.png',
								style : 'height:30px; left:143px; top:-30px ; position:absolute;'
							};
						Ext.DomHelper.append(first,downImage);
					}
					Ext.DomHelper.append(first,fromLoc);
					Ext.DomHelper.append(first,steps);
					canDrop(failLoc);
					canDrop(passLoc);
					canDrop(fromLoc);
					j=j+1;	
				}
				
			},
			failure : function(resp){
				
			}
	 });
};

function viewRouteStepsWinFN(routeName,routeKey){
	
	Ext.getCmp('saveRouteStepBtnId').hide();
	Ext.getCmp('cancelRouteStepBtnId').hide();
	
	Ext.getCmp('routeStepAddBtnId').setDisabled(true);
	if(backCount==0){
		Ext.getCmp('routeStepBackBtnId').setDisabled(true);
	}
	Ext.getCmp('routeStepDeleteBtnId').setDisabled(true);
	Ext.getCmp('selectAllId').setDisabled(true);
	Ext.getCmp('editRouteStepBtnId').setDisabled(false);
	var bigDiv ={
			id:'bigDivId',
			tag :'div' ,
			html:'',
			style:'width:900px; height:2000px; margin:0 0 0 0 ; position:relative;'
	};
	var label ={
			id: 'label0',
			tag:'label',
			html:'Route Name : ',
			style:'top:10px;left:20px; position:relative;'
	};
	 var routeNameText ={
			id: 'routeNameTextId0',
			tag:'label',
			html: routeName,
			style:'color:green; font-weight: bold;top:10px;left:20px; position:relative;'
	};
	Ext.Ajax.request({
		url:'../SearchRouteStep',
		params :{
			routeKey:routeKey,
			routeName:routeName
		},
		success : function(resp){
			var editPanel = Ext.getCmp('dropPanel');
			if(editPanel.body.dom.childNodes.length>1){
				editPanel.body.dom.removeChild(document.getElementById('label0'));
				editPanel.body.dom.removeChild(document.getElementById('routeNameTextId0'));
				editPanel.body.dom.removeChild(document.getElementById('bigDivId'));
				j=1;
			}
			//editPanel.body.dom.removeChild(document.getElementById(editPanel.body.dom.firstChild.id));
			var routeSteps = Ext.decode(resp.responseText).routeSteps;
			Ext.DomHelper.append(editPanel.body, label,true);
			Ext.DomHelper.append(editPanel.body, routeNameText,true);
			var editBig  = Ext.DomHelper.append(editPanel.body, bigDiv,true);
		    
			for (var i = 0; i < routeSteps.length; i++) {
				var failLoc={};
				var loc = {};
				var passLoc={};
				var leftImage = {};
				var downImage={};
				var fromLoc =[];
				var steps = {
						id: Ext.id(),
						tag:'h',
						html:routeSteps[i].step,
						style:'font-weight: bold;margin:2 0 0 0; padding:5px 0 0 0; text-align:center;width:25;height:25;border-radius:20px;background-color:#696262; color: white;left:50px; position:absolute;'
				};
				var firstElArray ={
						id: Ext.id(),
						tag :'div' ,
						html:'',
						style:'background-color:#F8F8F8;width:1500px; height:30px; margin:30 0 0 0 ;  position:relative;'
				};
				if(i != 0){
					downImage = {
							id :  Ext.id(),  
							tag : 'img',  
							src:'static/images/down2.png',
							style : 'height:30px; left:143px; top:-30px ; position:absolute;'
						};
				};
				if(routeSteps[i].failLocationKey!=0){
					leftImage = {
							id :  Ext.id(),  
							tag : 'img',  
							src:'static/images/left2.png',
							style : 'width:50; left:200px;top:5px; position:absolute;'
						};
					failLoc = {
							id :  Ext.id(),
							tag : 'div', 
							class : routeSteps[i].failLocationKey,
							html :  routeSteps[i].failLocationName,  
							style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid red;width:100px; height:30px;  left:250px; position:absolute;' 
					}
				};
				
				passLoc={
						id :  Ext.id(),  
						tag:'div',
						class : routeSteps[i].locationKey,
						html :  routeSteps[i].locationName,
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid green;width:100px; height:30px; left:100px; position:absolute;'	
				};
				
				if(routeSteps[i].fromLocationKey1!=0){
					var from1={
							id :  Ext.id(),  
							tag : 'div',  
							class:routeSteps[i].fromLocationKey1,
							html :  routeSteps[i].fromLocationName1,
							style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid blue;width:100px; height:30px; left:400px; position:absolute;'	
					}
					fromLoc.push(from1);
				};
				if(routeSteps[i].fromLocationKey2!=0){
					var from2={
							id :  Ext.id(),  
							tag : 'div',  
							class:routeSteps[i].fromLocationKey2,
							html :  routeSteps[i].fromLocationName2,
							style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid blue;width:100px; height:30px; left:520px; position:absolute;'	
					}
					fromLoc.push(from2);
				};
				if(routeSteps[i].fromLocationKey3!=0){
					var from3={
							id :  Ext.id(),  
							tag : 'div',  
							class:routeSteps[i].fromLocationKey3,
							html :  routeSteps[i].fromLocationName2,
							style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid blue;width:100px; height:30px;  left:640px; position:absolute;'	
					}
					fromLoc.push(from3);
				};
				if(routeSteps[i].fromLocationKey4!=0){
					var from4={
							id :  Ext.id(),  
							tag : 'div',  
							class:routeSteps[i].fromLocationKey4,
							html :  routeSteps[i].fromLocationName4,
							style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:black;border: 1px solid blue;width:100px; height:30px; left:760px; position:absolute;'	
					}
					fromLoc.push(from4);
				};
				 
				var first  = Ext.DomHelper.append(editBig, firstElArray,true); 
				
				if(failLoc!=null&&failLoc){
					Ext.DomHelper.append(first,failLoc);
					Ext.DomHelper.append(first,leftImage);
				}
				Ext.DomHelper.append(first,passLoc);
				if(fromLoc&&fromLoc!=null){
					Ext.DomHelper.append(first,fromLoc);
				}
				if(downImage&&downImage!=null){
					Ext.DomHelper.append(first,downImage);
				}
				if(routeSteps[i].insertedRoute == 1){
					Ext.get(passLoc.id).addListener('contextmenu', function(e) {
						e.stopEvent();
						currentDivId = e.target.id;
						detailMenu.showAt(e.getXY());

					});
				}
				Ext.DomHelper.append(first,steps);
			}
			
		},
		failure : function(){
			
		}
	});
	
};